<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>styleDemo</title>
    <link rel="stylesheet" href="/css/cssDemo/cDemo2.css">
</head>
<!--
外边距
css margin 属性用于设置元素的外边距。
单独的边
margin 单独的边
margin-top
margin-right
margin-bottom
margin-left
外边距可以设置以下值
auto 浏览器自动计算外边距
length 浏览器根据长度计算外边距 px pt cm等单位指定外边距
% 指定包含元素宽度的百分比
inherit 继承父元素的外边距

简写 p {
  margin: 25px 50px 75px 100px;
}
属性设置3个值
p {
  margin: 25px 50px 75px;
}
上外,右和左外边距,下外边距

auto属性 可以使得元素在其容器中水平居中
inherit值 继承父元素的外边距

外边距合并
外边距合并叠加是一个相当简单的概念 : 当两个垂直外边距相遇时,它们会形成一个外边距
合并后的外边距的高度等于两个外边距中值较大的一个

内边距
css padding 属性用于设置元素的内边距。
width 属性指定元素内容区域的宽度  内容区域是元素和模型的内边距 边框与外边距的部分
使用 box-sizing 属性将宽度保持为300px 无论填充量如何

css 设置 height 属性和 width 属性
设置元素的宽和高  height和width属性 不包括内边距边框和外边距
它设置的是元素的内边距 边框 以及外边距内的区域的高度或宽度
注意：请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

max-width 属性用于设置元素的最大宽度
max-width 属性的值将覆盖width属性的值

css 框模型 所有html元素都可以视为方框
在css中谈论设计和布局时候 会使用术语盒模型 或者框模型
css框模型实质上是一个包含每一个html元素的框 包含外边距,边框,内边距和内容


---------------------
margin 外边距
-----border 边框------
padding 内边距
---------width 宽度---
┆       element 元素
height 高度
┆
-------border-box 边框盒模型----------------

对不同部分的说明：

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。
框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

元素的总宽度应该这样计算：


元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

320px(宽度)
+ 20px（左+右内边距）
+ 10px（左+右边框）
+ 0px（左+右外边距）
= 350px

css 轮廓 在元素周围绘制的一条线 在边框外已凸显元素
轮廓和边框不同 ! 不同之处在于 轮廓是在元素边框之外绘制的,并且可能与其他内容重叠.
CSS 轮廓样式
outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

css 轮廓宽度
outline-width 属性指定轮廓的宽度
thin 通常为1px
medium 通常为3px
thick 通常为5px
特定尺寸 以 px,pt,cm,em

css 轮廓颜色
outline-color 属性用于设置轮廓的颜色
通过以下方式设置颜色 :
name -指定颜色名
HEX -指定十六进制值
RGB -指定Rgb值
Hsl -指定hsl值
invert -执行颜色反转

css outline -简写属性
outline 属性是用于设置以下各个轮廓属性的简写属性
outline-width
outline-style 必需
outline-color
outline 属性可以指定一个 两个或三个值
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

css 轮廓偏移
outline-offset 属性在元素的轮廓和边框之间添加控件 元素及其轮廓之间的空间是透明的
outline	简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color	设置轮廓的颜色。
outline-offset	指定轮廓与元素的边缘或边框之间的空间。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。


文本颜色
color 属性用于设置文本的颜色
  颜色名 -red
  十六进制值 -#ff0000
  RGB值 比如rgb(255,0,0)

文本对齐
  text-align 属性用于设置文本的水平对齐方式
  文本可以左对齐或右对齐,或居中对齐
  vertical-align 属性设置元素的垂直对齐方式

文字装饰
  text-decoration 属性用于设置或删除文本装饰
  text-decoration 通常用于从链接上删除下划线
  text-decoration: overline;
  text-decoration: line-through;
  text-decoration: underline;
  建议不要在非链接文本加下划线,

文本转换
  text-transform 属性用于指定文本中大写和小写字母
  它可用于将内容转换成大写或小写字母,或将每个单词的首字母大写
  text-transform: uppercase; 文本转换成大写
  text-transform: lowercase; 文本转换成小写
  text-transform: capitalize; 文本转换成大写小写一致

文字缩进
  text-indent 属性 用于指定文本第一行的缩进

字母间距
  letter-spacing 属性用于指定文本中字符之间的间距
行高
  line-height 属性用于指定行之间的间距
字间距
  word-spacing 属性用于指定文本中单词之间的间距
空白
  white-space 属性指定元素内部空白的处理方式
   white-space: nowrap  禁用元素内的文本转换

文本阴影
  text-shadow 属性为文本添加阴影
  最简单的用法是指定水平阴影2px 和 垂直阴影 2px
  text-shadow: 2px 2px 5px red;
  水平阴影/垂直阴影/向阴影添加模糊效果/向阴影添加颜色

通用字体族
  在css中有5个通用字体族
  衬线字体--在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  无衬线字体 - 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  等宽字体 - 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  草书字体 - 模仿了人类的笔迹。
  幻想字体 - 是装饰性/俏皮的字体。
  所有不同的字体名称都属于这5个通用字体系列之一

字体样式
  font-style 属性主要用于指定斜体文本
  normal 文字正常显示
  italic 文本以斜体显示
  oblique -文本为倾斜

  font-weight 属性指定字体的粗细
  font-weight: normal; 正常
  font-weight: bold; 粗体

  字体变体
  font-variant 属性指定是否以small-caps字体小型大写字母显示文本
  在small-caps字体中 所有小写的字母都将转换成大写字母,但是转换后的大写字母的字体大小小于文本原始大写的字体大小

  字体大小
   font-size 属性设置文本的大小
   绝对尺寸
    将文本设置为指定大小
    不允许用户在所有浏览器中更改文本大小
   相对尺寸
    设置相对于周围元素的大小
    允许用户在浏览器中更改文本大小
   font-size 40px 以像素设置文本大小可以完全控制文本大小
   为了允许用户调整文本大小 在浏览器菜单中,许多开发人员使用em而不是像素
   1em等于当前字体大小.浏览器中默认文本大小为16px 因此 默认大小 1em 为16px
   em pixels/16=em

字体属性
  可以在一个属性中指定所有单个字体属性
  font 属性以下属性的简写属性
  font-style 规定文本的字体大小
  font-variant 规定是否以小型大写字母的字体显示文本
  font-weight 规定字体的粗细
  font-size/line-height 规定文本的字体大小
  font-family 规定文本的字体系列 字体族

设置链接样式
  链接可以使用任何css属性
  a: link 正常的,未访问的链接
  a: visited 用户访问过的链接
  a: hover 用户将鼠标悬停在链接上是
  a: active 链接被点击时

如果多个链接状态设置样式 请遵循如下顺序规则
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

文本装饰
text-decoration 属性主要用于从链接中删除下滑线

背景色
background-color 属性可用于指定链接的背景色

链接按钮
组合多个属性 将链接显示为框/按钮

html 列表 和css列表属性
在html中 列表 主要有两种类型
  无序列表 (<ul>) 列表项用的是项目符号标记
  有序列表(<ol>) 列表项用的是数字或字母标记
css 列表属性
  为有序列表设置不同的列表项标记
  为无序列表设置不同的列表项标记
  将图像设置为列表项标记
  为列表和列表项添加背景色


-->
<body>
<h1>颜色验证</h1>
<h2>对齐方式</h2>
<h3>对齐方式2</h3>
<ul class="ula">a</ul>
<ul class="ulb">b</ul>
<ol class="olc">c</ol>
<ol class="old">d</ol>
<a id="a1" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a2" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a3" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a4" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a5" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a6" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a7" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<a id="a8" href="https://www.baidu.com/">https://www.baidu.com/</a><br>
<div id="duiQi">
  验证对齐方式文本1 <br>
  验证对齐方式文本2 <br>
  验证对齐方式文本3 <br>
</div>
<p class="a">This is a font</p>
<p id="fontF">Time New Roman</p>
<p>扣多少洞口开发,法国懂法守法神鼎飞丹砂,大萨达是的是的洒点水,撒独守空房购房款空空空都怕.
东方闪电是的是的是多少的湿哒哒,是的是的师德师风萨达萨达三但是萨达萨达.
</p>
<p id="yy">文字阴影效果!</p>
<p id="fangX">
  这个是验证文本的对齐方式; <br>
  这个是验证文本的对齐方式; <br>
</p>
<p id="cuiZhi">
  这个是验证文本的对齐方式; <br>
  这个是验证文本的对齐方式; <br>
</p>
<a href="https://www.baidu.com/">这个是装饰文本</a>
<p>"JDIOisdiy,dijijDIOI"</p>
<div class="divWar">外边距继承</div>
<p class="pWar">外边距</p>
<div class="divPad">内边距</div>
<div id="div1">此元素的宽度是300px,高度是500px</div>
<p style="outline-style: solid;color: brown">外轮廓样式</p>
<p id="ex1">像素的轮廓</p>
<p id="ex2">像素的轮廓</p>
<p id="ex3">像素的轮廓</p>
<p id="ex4">像素的轮廓</p>
<p style="margin: 50px;border: 1px solid black;outline: 1px solid red;outline-offset: 25px">轮廓空间</p>
</body>
</html>
